@import 'fonts';
@import 'common';

@mixin input-field {
    float:left;
    margin:5px;
    padding:2px 4px;
    border:1px solid $grey;
    width:400px;
    font:12px Arial
}

body {
    text-align:center;
    font:14px 'Armata',Calibri,Arial;
    color:$grey-dark;

    h1, h2, h3 {
        font-family:Courgette,Cambria,Georgia;
        font-weight:normal
    }

    h1 {
        font-size:36px;
        color:$red;
        margin:20px 0 30px;
        clear:both;
    }
    h2 {
        font-size:20px
    }
    h3 {
        font-size:16px
    }

    p {
        margin:10px 0 20px
    }

    a {
        &:link, &:visited {
            color:$blue;
            text-decoration:underline
        }
        &:hover,&:active{
            text-decoration:none
        }

        img{border:none}
    }

    .left {float:left}
    .right {float:right}

    #flashMessage{padding:10px;text-align:center;font-weight:bolder}
    #flashMessage.ok{background:$green;color:white}
    #flashMessage.error{background:$red;color:white}

    form {
        label {
            display:block;
            float:left;
            clear:both;
            text-align:right;
            width:150px;
            margin:7px 0;
            cursor:pointer;

            &.inline {clear:none}
            &.auto   {width:auto}
        }
        input, textarea, select {

            &[type=text],&[type=password],&[type=checkbox] {
                @include input-field;
            }
            &[type=text]:focus,&[type=password]:focus,&[type=checkbox]:focus {
                border-color:$red
            }
            &.form-error{
                border-color:$red
            }
            &[type=checkbox]{
                width:auto;
                margin:10px 5px
            }
            &.small{width:50px}
            &.medium{width:80px}

            &[type=submit]{
                clear:both;
                float:right;
                cursor:pointer;
                border-radius:4px;
                color:white;
                border:none;
                padding:4px 7px;
                font-weight:bolder;
                background:$red;

                &.loading{
                    background:$red image-url('throbber.submit.gif') no-repeat 3px center;
                    padding-left:20px
                }
            }
        }

        textarea,select {
            @include input-field;

            &:focus {
                border-color:$red;
            }
        }

        textarea{height:50px}
        select {
            option {
                padding:2px
            }
            optgroup{
                background:$grey-dark;
                color:white
            }
            optgroup option {
                padding:2px 2px 2px 20px;
                background:white;
                color:black
            }
        }
        
        .label{
            float:left;
            margin:2px 0
        }
        p{
            float:left;
            clear:both;
            margin:0
        }

        fieldset {
            float:left;
            clear:both;
            width:500px;
            padding:10px;
            margin:10px 0 10px 80px;
            border:1px solid $grey

            legend{
                padding:0 5px;
                color:$grey
            }
            label{
                text-align:left;
                width:220px;
                clear:none
            }
            input:nth-child(2n-1){clear:both}
            hr{
                clear:both;
                margin:10px 0;
                height:0;
                border:none;
                border-top:1px solid $grey;
                float:left;
                width:100%
            }
        }
        .error-message{
            float:left;
            background:$red;
            color:white;
            padding:2px 4px;
            margin:5px 10px
        }
    }

    .split{
        display:block;
        width:100%;
        height:8px;
        margin:10px 0;
        clear:both;

        &.black-red {
            background:#999;
            border-right:300px solid $red;
            width:500px
        }
    }

    #container {
        width:800px;
        margin:0 auto;
        text-align:left;
    }

    #content {
        text-align:left;
        
        ul, ol {
            padding-left:20px
        }
        &.cke_editable{padding:20px;width:auto;height:auto}
    }

    header {
        padding:20px 0;
        float:left;
        width:100%;
        position:relative;

        .logo{
            float:left;
            width:130px;
            height:100px;
            text-indent: -100em;
            overflow: hidden;
            background:image-url('koncar_auto.png?h=100') no-repeat center center;
        }
        .menu-toggle{display:none}
    }

    #menu {
        display:block;
        position:absolute;
        right:0;
        top:30px;
        font:24px Courgette, Cambria,Georgia;
        margin:20px 0 0 20px;
        cursor:default;

        .menu{
            list-style:none;
            background:#fff;

            .menu{
                position:absolute;
                border-radius:4px;
                width:150px;
                display:none;
                left:0;
                border:1px solid $grey;
                box-shadow:2px 2px 4px #777;
                z-index:1;

                li{
                    display:block;
                    float:none
                }
                .menu{
                    left:143px;
                    top:3px;
                    z-index:3
                }
            }
        }
        li{
            display:block;
            float:left;
            padding:3px;
            position:relative
        }
        >.menu>li{margin:0 5px}
        
        a, strong{
            font-weight:normal;
            display:block;
            color:$grey-dark;
            text-decoration:none;
            padding:3px 7px;
            border-radius:4px
        }
        a:hover,li.hover>a,strong{
            color:#fff;
            background-color:$grey
        }
        .sub>a{
            background-image:image-url('arrow-right.png');
            background-repeat:no-repeat;
            background-position:95% center;
            padding-right:20px;
        }
        .hover>a         { background-image:image-url('arrow-right-h.png') }
        >.menu>li.sub>a  { background-image:image-url('arrow-down.png') }
        >.menu>li.hover>a{ background-image:image-url('arrow-down-h.png') }
    }

    table {
        border-collapse:collapse
    }
        td {
            padding:3px 6px
        }
        table .total td{
            font-weight:bolder;
            border-top:3px double #000
        }

    footer {
        clear:both;
        margin:30px 0;
        text-align:center;
        color:#999;
        padding-top:20px;
    }
    .cake-sql-log{display:none}

    #map {
        width:400px;
        height:400px;
    
        label{
            display:inline-block;
            width:auto;
            clear:none;
            float:none
        }
        .map-container{border:none}
        input{width:auto}
    }

    .contact-info {
        width:350px;
        margin-right:10px;

        h1{margin-bottom:10px}
        p{margin-bottom:5px}
        h2{margin:20px 0 10px;color:#999}
    }

    #contact-form {
        label {
            display:block;
            float:none;
            text-align:left;
            margin:5px 0
        }
        input[type=text], textarea {
            width:300px;
            float:none;
            margin:0 0 10px
        }
        textarea {height:100px}
        
        .captcha{
            float:left;
            clear:both;

            label{
                display:block;
                width:auto;
                float:left;
            }
            input[type=text]{
                width:70px;
                float:left;
                margin:3px 5px;
            }
            img{
                float:left;
                margin:5px 0;
            }

            .error-container{display:block;clear:both;width:100%}
            .error-message{position:static;width:100%}
        }
        
        .error-container{
            display:inline-block;
            position:relative;
            height:20px;
            width:10px
        }
        .error-message{
            left:-10px;
            position:absolute;
            z-index:9999;
            min-width:120px;
            background:$red;
            color:#fff;
            padding:5px;
            box-shadow:2px 2px 4px #000
        }
    }

    .home-item {
        float:left;
        width:380px;
        margin:0 40px 40px 0;

        &:nth-child(2n) { margin-right:0 }
        &:nth-child(2n-1){clear:both}
        
        h1 {
            font-size:20px;
            margin:20px 0;

            a {text-decoration:none; color:$red}
        }
        img {
            float:left;
            margin:0 10px 10px 0
        }
    }

    .category-list {
        list-style:none;
        float:left;
        padding:0;

        li {
            float:left;
            width:360px;
            margin:0 30px 40px 0
        }
        h2 {
            margin:0 0 10px;
            a{
                color:#777;
                text-decoration:none
            }
        }
        a{
            text-decoration:none;
            color:$grey-dark;

            &:hover{
                color:#000
            }
        }
        img {
            border:1px solid #999;
            padding:2px;
            background:#fff;
        }
    }

}

@import 'mobile';